<template>
  <vue-scroll :ops="ops" style="width:100%;height:100%">

  <div >
    <div v-show="wx">
      <img src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/source/wx/iswx.jpg"
           style="height: auto; width: 100%">
    </div>


    <div v-show="!wx">
        <div>
<!--          <div v-if="exist">-->
<!--            不存在该游戏包-->
<!--          </div>-->
          <div >
            <div v-if="Number(windowWidth) > 1024 " style="background: rgb(0, 0, 0); width: 780px;margin: 0px auto;">
              <el-image
                src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/top1_v2.jpeg"
                ></el-image>
              <el-image src="https://img2.ssl.q1.com/lwsy/images/m/index190319/top2_v2.jpg?v=1" fit="contain"></el-image>
              <el-image src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/tit_gameFeatures.jpeg"
                fit="contain"></el-image>
              <div style="background-color: #ABADC6">
                <div class="successNav">
                     <swiper :options="swipersuccess">
                       <!-- <swiper-slide v-for="(item,index) in indexContentTwo[2].children" :key="index"><img :src="item.picture" ></swiper-slide> -->
                       <swiper-slide><img  src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg" alt="" ></swiper-slide>
                       <swiper-slide><img  src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg" alt="" ></swiper-slide>
                       <swiper-slide><img  src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg" alt="" ></swiper-slide>
                       <swiper-slide><img  src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg" alt="" ></swiper-slide>
                       <swiper-slide><img  src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg" alt="" ></swiper-slide>
                     </swiper>
                  </div>
              </div>
              <el-image
                src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg"
                fit="contain"></el-image>
              <el-image src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg"
                fit="contain"></el-image>
            </div>
            <div v-else>
              <el-image
                src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/top1_v2.jpeg"
                fit="contain"></el-image>
              <el-image src="https://img2.ssl.q1.com/lwsy/images/m/index190319/top2_v2.jpg?v=1"
                fit="contain"></el-image>
              <el-image src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/tit_gameFeatures.jpeg"
                        fit="contain"></el-image>
<!--              <el-carousel :interval="4000" type="card" height="200px">-->
<!--                <el-carousel-item v-for="item in 6" :key="item">-->
<!--                  <h3 class="medium">{{ item }}</h3>-->
<!--                </el-carousel-item>-->
<!--              </el-carousel>-->
<!--              <el-image-->
<!--                src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/features1.jpg"-->
<!--                fit="contain"></el-image>-->
<!--              <el-image-->
<!--                src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/tit_vision.jpeg"-->
<!--                fit="contain"></el-image>-->
              <el-image src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg"
                fit="contain"></el-image>
              <el-image src="https://promote-source.oss-cn-hangzhou.aliyuncs.com/landingPage/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%282%29/features1.jpg"
                fit="contain"></el-image>
            </div>
          </div>
        </div>

    </div>


  </div>
  </vue-scroll>
</template>


<script>

import {getGamePathByCode} from "@/api/game/gamePromote";
import {gameDetail} from "@/api/game/game";
import {appSource, isWeiXin} from "../../util/util";
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "landingPage",
  components: {
    swiper,
    swiperSlide
  },
  data() {

    return {
      wx: false,
      exist: false,
      url1: 'https://g.288sy.com/h/130894d5',
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
      code: '',
      downloadUrl: '',
      gamedetail: {},
      winTitle: "",
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#F5F5F5",//滚动条颜色
          opacity: 0.5,//滚动条透明度
          "overflow-x": "hidden"
        }
      },
      swipersuccess:{
        effect:"coverflow",
        grabCursor: true,
        watchSlidesProgress: true,
        centeredSlides: true,
        loop: true,
        // loopedSlides: 3,
        slidesPerView: 2,
        autoplay: {
          delay: 3000,//自动播放速度
          disableOnInteraction: false//鼠标移上去时是否还继续播放
        },
        coverflowEffect: {
          rotate: 50,
          stretch: 100,
          depth: 100,
          modifier: 1,
          slideShadows : false
        },
      },
    }

  },
// <!--在watch中监听实时宽高-->
  watch: {

    windowHeight(val) {
      let that = this;
      console.log("实时屏幕高度：", val, that.windowHeight);
    },
    windowWidth(val) {
      let that = this;
      console.log("实时屏幕宽度：", val, that.windowHeight);
    }
  },
  beforeDestroy() {
    document.title = this.winTitle
  },
  created() {
    this.winTitle = document.title
    document.title = "游戏下载"
    this.code = this.$route.query.code;
    console.log("this.$route.query.code", this.$route.query.code)
    let osType = appSource();
    getGamePathByCode(this.code, osType).then(res => {

      console.log("res.data.data", res.data)
      this.downloadUrl = res.data.data.gameUrl
      if (this.downloadUrl == undefined || this.downloadUrl == '') {
        this.exist = true;
        return;
      }
      console.log(res.data.data)

      let params = {
        "id": res.data.data.gameId,
      }
      gameDetail(params).then(res => {
        const data = res.data.data;
        this.gamedetail = data;
        console.log("this.gameList", this.gamedetail)
        document.title = data.gameName
      })
    })
  },
  methods: {

    downloadFunc() {
      this.wx = isWeiXin()
      if (this.wx) {
        return
      }
      let osType = appSource();
      if (osType == 1) {
        window.location.href = "itms-services://?action=download-manifest&amp;url=" + this.downloadUrl
      } else {
        window.location.href = this.downloadUrl
      }
    },
  },
  mounted() {
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        that.windowHeight = window.fullHeight;  // 高
        that.windowWidth = window.fullWidth; // 宽
      })()
    }
  },

}
</script>

<style scoped >
/*// 滚动条位置*/
/deep/.__bar-is-vertical {
  right: -1px !important;
}
/*// 隐藏横向滚动条*/
   /deep/.__bar-is-horizontal {
     display: none !important;
   }
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.successNav .swiper-slide.swiper-slide-active img {
  transform: scaleX(1);
  border-radius: 5px;
}
.successNav .swiper-slide img {
  width: 150px;
  width: 380px;
}
/*.successNav .swiper-slide.swiper-slide-duplicate-prev img,*/
/*.successNav .swiper-slide.swiper-slide-next img,*/
/*.successNav .swiper-container-3d .swiper-slide-shadow-right,*/
/*.successNav .swiper-container-3d .swiper-slide-shadow-left,*/
/*.successNav .swiper-slide.swiper-slide-prev img,*/
/*.successNav .swiper-slide.swiper-slide-prev{*/
/*  !*transform: rotateY(190deg);*!*/

/*  border-radius: 5px !important;*/
/*}*/
</style>
